<template>
  <view class="container">
    <!-- 内容滚动区 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 轮播图区域 -->
      <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.imageUrl" mode="aspectFill" class="banner-image" />
        </swiper-item>
      </swiper>

      <!-- 非遗商品区域 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">非遗商品</text>
          <text class="more-text">查看更多</text>
        </view>
        <scroll-view class="product-scroll" scroll-x>
          <view class="product-list">
            <view class="product-item" v-for="(item, index) in productList" :key="index">
              <image :src="getImage(item.images)" mode="aspectFill" class="product-image" />
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price">¥{{ item.price }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 文化资讯区域 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">文化资讯</text>
          <text class="more-text">查看更多</text>
        </view>
        <view class="news-list">
          <view class="news-item" v-for="(item, index) in newsList" :key="index">
            <image :src="item.imageUrl" mode="aspectFill" class="news-image" />
            <view class="news-info">
              <text class="news-title">{{ item.title }}</text>
              <text class="news-desc">{{ item.description }}</text>
              <text class="news-time">{{ item.publishTime }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 美食推荐区域 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">美食推荐</text>
          <text class="more-text">查看更多</text>
        </view>
        <view class="food-list">
          <view class="food-item" v-for="(item, index) in foodList" :key="index">
            <image :src="getImage(item.image)" mode="aspectFill" class="food-image" />
            <view class="food-info">
              <text class="food-name">{{ item.name }}</text>
              <text class="food-price">¥{{ item.price }}</text>
              <text class="food-desc">{{ item.description }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      productList: [],
      newsList: [],
      foodList: []
    }
  },
  onLoad() {
    this.loadBannerList()
    this.loadProductList()
    this.loadNewsList()
    this.loadFoodList()
  },
  methods: {
    async loadBannerList() {
      try {
        const res = await this.$api.genBannerList()
        this.bannerList = res || []
      } catch (error) {
        console.error('Failed to load banner list:', error)
      }
    },
    async loadProductList() {
      try {
        const res = await this.$api.getProductList()
        this.productList = res || []
      } catch (error) {
        console.error('Failed to load product list:', error)
      }
    },
    async loadNewsList() {
      try {
        const res = await this.$api.getNewsList()
        this.newsList = res || []
      } catch (error) {
        console.error('Failed to load news list:', error)
      }
    },
    async loadFoodList() {
      try {
        const res = await this.$api.getFoodList()
        this.foodList = res || []
      } catch (error) {
        console.error('Failed to load food list:', error)
      }
    }
  }
}
</script>

<style>
page {
  background-color: #F5E6CA;
  min-height: 100vh;
}

.container {
  flex: 1;
  min-height: 100vh;
  background-color: #F5E6CA;
}

.content-scroll {
  flex: 1;
  height: 100vh;
}

.banner-swiper {
  height: 300rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.section {
  margin: 30rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #4A3728;
}

.more-text {
  font-size: 14px;
  color: #999999;
}

.product-scroll {
  width: 100%;
}

.product-list {
  display: flex;
  padding: 10rpx 0;
}

.product-item {
  margin-right: 20rpx;
  width: 200rpx;
  flex-shrink: 0;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

.product-name {
  font-size: 14px;
  color: #333333;
  margin-top: 10rpx;
  display: block;
}

.product-price {
  font-size: 16px;
  color: #FF8C3D;
  font-weight: bold;
  margin-top: 6rpx;
  display: block;
}

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: flex;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #EEEEEE;
}

.news-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.news-image {
  width: 200rpx;
  height: 140rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.news-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.news-desc {
  font-size: 14px;
  color: #666666;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-time {
  font-size: 12px;
  color: #999999;
}

.food-list {
  display: flex;
  flex-direction: column;
}

.food-item {
  display: flex;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #EEEEEE;
}

.food-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.food-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.food-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.food-name {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.food-price {
  font-size: 16px;
  color: #FF8C3D;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.food-desc {
  font-size: 14px;
  color: #666666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
